{% extends 'base.html' %}
{% load static %}

{% block title %}
    区域经理业绩
{% endblock %}

{% block css %}
    <style>
        tr, td, th {
            text-align: center;
        }
    </style>
{% endblock %}

{% block nav %}
    <li><a href="{% url 'index' %}">数据总览</a></li>
    <li><a href="{% url 'search' %}">检索订单</a></li>
    <li class="active"><a href="{% url 'chart' %}">区域经理业绩</a></li>
    <li><a href="{% url 'predict' %}">地区业绩预测</a></li>
{% endblock %}

{% block body %}
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <form class="form form-inline" style="margin-bottom: 20px">
                    <div class="form-group">
                        <label class="form-control-static" for="area">地区: </label>&nbsp;
                        <select class="form-control" id="area" name="area">{{ area_options_html }}</select>
                    </div>&emsp;
                    <button class="btn btn-info" type="submit">查看</button>&emsp;&emsp;
                    <p class="form-control-static">{{ the_area }}地区的区域经理：
                        <span class="label label-info" style="font-size: 14px;">{{ salesman_obj.manager }}</span>
                    </p>
                </form>
            </div>
            <div class="col-md-3" style="height: 120px;">
                <button class="list-group-item btn-info" style="width: 100%;">
                    <h4 class="text-center text-info">省份数量</h4>
                    <p class="text-center" style="font-weight: bolder">{{ province_count }}</p>
                </button>
            </div>
            <div class="col-md-3" style="height: 120px;">
                <button class="list-group-item btn-info" style="width: 100%;">
                    <h4 class="text-center text-info">城市数量</h4>
                    <p class="text-center" style="font-weight: bolder">{{ city_count }}</p>
                </button>
            </div>
            <div class="col-md-3" style="height: 120px;">
                <button class="list-group-item btn-info" style="width: 100%;">
                    <h4 class="text-center text-info">总销售额</h4>
                    <p class="text-center" style="font-weight: bolder">{{ revenue_sum }}</p>
                </button>
            </div>
            <div class="col-md-3" style="height: 120px;">
                <button class="list-group-item btn-info" style="width: 100%;">
                    <h4 class="text-center text-info">总创收</h4>
                    <p class="text-center" style="font-weight: bolder">{{ profit_sum }}</p>
                </button>
            </div>
            <div class="col-md-8">
                <div class="panel panel-info">
                    <div class="panel-heading">{{ the_area }}地区各省份的利润情况</div>
                    <div id="bar1" style="height: 600px"></div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="panel panel-info">
                    <div class="panel-heading" id="info"></div>
                    <table id="myTable" class="table table-striped table-bordered table-hover">
                        <thead>
                        <tr>
                            <th>城市</th>
                            <th>利润</th>
                        </tr>
                        </thead>
                        <tbody>
                        <!-- 行数据将被插入到这里 -->
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="col-md-6">
                <div class="panel panel-info">
                    <div class="panel-heading">商品分类构成</div>
                    <div id="pie1" style="height: 400px"></div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="panel panel-info">
                    <div class="panel-heading" id="pie2_title"></div>
                    <div id="pie2" style="height: 400px"></div>
                </div>
            </div>
            <div class="col-md-12">
                <div class="panel panel-info">
                    <div class="panel-heading">{{ the_area }}地区历史销售记录</div>
                    <div id="line" style="height: 400px"></div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block js %}
    <script type="text/javascript">
        let bar1 = echarts.init(document.querySelector("#bar1"));
        let bar1_option = {
            {#color: ["#516b91", "#59c4e6", "#edafda", "#93b7e3", "#a5e7f0", "#cbb0e3"],#}
            color: ["#93b7e3", "#edafda", "#59c4e6", "#a5e7f0", "#cbb0e3"],
            xAxis: {
                type: 'category',
                data: {{ bar1_x }},
            },
            tooltip: {},
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            legend: {
                top: '2%',
                left: '2%',
            },
            toolbox: {
                top: '2%',
                right: '2%',
                feature: {
                    magicType: {
                        type: ['stack']
                    },
                    restore: {},
                    dataView: {},
                    saveAsImage: {
                        pixelRatio: 2
                    }
                }
            },
            yAxis: {},
            series: [
                {
                    name: '利润',
                    data: {{ bar1_y_1 }},
                    type: 'bar'
                },
                {
                    name: '销量',
                    data: {{ bar1_y_2 }},
                    type: 'bar'
                }
            ]
        };
        bar1.setOption(bar1_option);
        // 添加ECharts点击事件 Ajax刷新右侧排行榜
        bar1.on('click', function (params) {
            $.ajax({
                url: '/get_profit_info/',
                type: 'POST',
                data: {
                    'province': params.name,
                    'csrfmiddlewaretoken': '{{ csrf_token }}',
                },
                dataType: 'json',
                success: function (data, textStatus, jqXHR) {
                    $('#info').text(params.name + "的各地区利润TOP15");
                    // 创建一个表格
                    let table = $('#myTable');
                    // 清空表格元素
                    table.find('tbody').empty();
                    // 遍历数据，对每一行数据创建一个表格行
                    $.each(data.result, function (index, value) {
                        let row = $('<tr></tr>');
                        row.append($('<td></td>').text(value.city));
                        row.append($('<td></td>').text(value.profit));
                        // 将这个表格行添加到表格中
                        table.append(row);
                    });
                    // 将填充完数据的表格添加到页面中的某个元素（例如一个 id为 "content" 的 div）
                    $('#content').html(table);
                    console.log(data);
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    // 这里是请求失败后的回调函数
                    alert("获取失败！");
                }
            });
        });
        window.addEventListener("resize", function () {
            bar1.resize();
        });
    </script>
    <script type="text/javascript">
        let pie2 = echarts.init(document.querySelector("#pie2"));
        let pie2_option = {
            color: ["#516b91", "#59c4e6", "#edafda", "#93b7e3", "#a5e7f0", "#cbb0e3"],
            tooltip: {
                trigger: 'item'
            },
            legend: {
                bottom: '5%',
                left: 'center'
            },
            series: [
                {
                    name: '订单数量',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    center: ['50%', '45%'],
                    avoidLabelOverlap: false,
                    itemStyle: {
                        borderRadius: 10,
                        borderColor: '#fff',
                        borderWidth: 2
                    },
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: 40,
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [],
                }
            ]
        };
        pie2.setOption(pie2_option);
        window.addEventListener("resize", function () {
            pie2.resize();
        });
    </script>
    <script type="text/javascript">
        let pie1 = echarts.init(document.querySelector("#pie1"));
        let pie1_option = {
            color: ["#516b91", "#59c4e6", "#edafda", "#93b7e3", "#a5e7f0", "#cbb0e3"],
            tooltip: {
                trigger: 'item'
            },
            legend: {
                bottom: '5%',
                left: 'center'
            },
            series: [
                {
                    name: '订单数量',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    center: ['50%', '45%'],
                    avoidLabelOverlap: false,
                    itemStyle: {
                        borderRadius: 10,
                        borderColor: '#fff',
                        borderWidth: 2
                    },
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: 40,
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: {{ pie1_data }},
                }
            ]
        };
        pie1.setOption(pie1_option);
        pie1.on('click', function (params) {
            // AJAX请求新的数据
            $.ajax({
                url: '/push_pie2_data/', // ajax请求url
                type: 'POST',
                data: {
                    category: params.name, // 将点击的部分的名称发送到服务器
                    'csrfmiddlewaretoken': '{{ csrf_token }}',
                    'area': '{{ the_area }}',
                },
                success: function (data) {
                    // 更新右侧
                    $('#pie2_title').text(params.name + "分类的子分类构成");
                    // 收到新数据后更新右侧饼状图
                    console.log(data.result);
                    pie2_option.series[0].data = data.result;  // 假设data是一个数组
                    pie2.setOption(pie2_option);
                }
            });
        });
        window.addEventListener("resize", function () {
            pie1.resize();
        });
    </script>
    <script type="text/javascript">
        let line = echarts.init(document.querySelector("#line"));
        let line_option = {
            color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            },
            legend: {
                top: '3%',
                left: '3%',
                data: ['办公用品', '技术', '家具']
            },
            toolbox: {
                show: true,
                top: '3%',
                right: '3%',
                feature: {
                    dataZoom: {
                        yAxisIndex: 'none'
                    },
                    dataView: {readOnly: false},
                    magicType: {type: ['line', 'bar']},
                    restore: {},
                    saveAsImage: {}
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    boundaryGap: false,
                    data: {{ line_x }},
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '办公用品',
                    type: 'line',
                    stack: '总量',
                    smooth: true,
                    lineStyle: {
                        width: 0
                    },
                    showSymbol: false,
                    areaStyle: {
                        opacity: 0.8,
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            {
                                offset: 0,
                                color: 'rgb(128, 255, 165)'
                            },
                            {
                                offset: 1,
                                color: 'rgb(1, 191, 236)'
                            }
                        ])
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: {{ line_y_1 }},
                },
                {
                    name: '技术',
                    type: 'line',
                    stack: '总量',
                    smooth: true,
                    lineStyle: {
                        width: 0
                    },
                    showSymbol: false,
                    areaStyle: {
                        opacity: 0.8,
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            {
                                offset: 0,
                                color: 'rgb(0, 221, 255)'
                            },
                            {
                                offset: 1,
                                color: 'rgb(77, 119, 255)'
                            }
                        ])
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: {{ line_y_2 }},
                },
                {
                    name: '家具',
                    type: 'line',
                    stack: '总量',
                    smooth: true,
                    lineStyle: {
                        width: 0
                    },
                    showSymbol: false,
                    areaStyle: {
                        opacity: 0.8,
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            {
                                offset: 0,
                                color: 'rgb(55, 162, 255)'
                            },
                            {
                                offset: 1,
                                color: 'rgb(116, 21, 219)'
                            }
                        ])
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: {{ line_y_3 }},
                },
            ]
        };
        line.setOption(line_option);
        window.addEventListener("resize", function () {
            line.resize();
        });
    </script>
{% endblock %}
